<%--
  Created by IntelliJ IDEA.
  User: 24310
  Date: 2025/6/11
  Time: 下午6:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>${bookTitle}在线阅读</title>
    <meta name="keywords" content="${bookTitle},在线阅读">
    <link rel="canonical" href="${pageContext.request.contextPath}/reader/${bookId}">

    <style>
        :root {
            --primary-color: #2c6da4;
            --text-primary: #333;
            --bg-color: #f9f9f9;
            --shadow-base: 0 2px 8px rgba(0,0,0,0.1);
        }

        body {
            background-color: var(--bg-color);
            margin: 0;
            padding: 0;
            font-family: DNMrHsV173Pd4pgy, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .main-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 2rem;
        }

        .reader-header {
            padding: 1.5rem 0;
            background: linear-gradient(145deg, #ffffff, #f8f9fa);
            box-shadow: var(--shadow-base);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .book-title {
            font-size: 1.8rem;
            color: var(--text-primary);
            text-align: center;
            margin: 0;
            letter-spacing: 1px;
        }

        /* 内容区域优化 */
        #bookContent {
            max-width: min(800px, 90vw);
            margin: 2rem auto;
            padding: 2rem;
            background: #fff;
            border-radius: 8px;
            box-shadow: var(--shadow-base);
            line-height: 1.8;
            box-sizing: border-box;
            overflow: visible;
        }

        .text-content {
            white-space: pre-wrap;
            overflow-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
            font-family: inherit;
            color: #444;
            font-size: 1.1em;
            text-align: justify;
            padding: 1rem;
        }

        /* 夜间模式 */
        .night-mode {
            background: #1a1a1a;
            --text-primary: #e0e0e0;
        }
        .night-mode #bookContent {
            background: #1a1a1a;
            color: #e0e0e0;
        }
        .night-mode #bookContent .text-content {
            color: #e0e0e0;
        }
        .night-mode .comments-container {
            background: #2d2d2d;
            color: #e0e0e0;
        }
        .night-mode .comment-form {
            background: #2d2d2d;
            color: #e0e0e0;
        }
        .night-mode .comment-list {
            background: #2d2d2d;
            color: #e0e0e0;
        }
        .night-mode .comment-item {
            background: #3a3a3a;
        }
        .night-mode .comment-item .comment-username {
            color: #e0e0e0;
        }
        .night-mode .comment-item .comment-time {
            color: #e0e0e0;
        }
        .night-mode .reader-btn {
            background: #3a3a3a;
            color: #e0e0e0;
        }

        /* 字体大小控制 */
        #bookContent.small-font .text-content { font-size: 14px; }
        #bookContent.medium-font .text-content { font-size: 16px; }
        #bookContent.large-font .text-content { font-size: 18px; }

        /* 控制栏样式保持不变 */
        .control-bar {
            padding: 1.5rem 0;
            background: rgba(255,255,255,0.95);
            box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
            position: sticky;
            bottom: 0;
        }

        .reader-btn {
            min-width: 100px;
            padding: 0.8rem 1.5rem;
            border-radius: 25px;
            border: 1px solid #ddd;
            background: white;
            color: #666;
            transition: all 0.3s ease;
            margin: 0 0.5rem;
        }

        /* 添加语音控制样式 */
        #toggleAudio.active-audio {
            background: var(--primary-color);
            color: white;
        }

        #toggleAudio.active-audio:hover {
            background: #1f5b8e;
        }

        /* 语音控制加载提示 */
        .audio-loading {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 1rem 2rem;
            border-radius: 8px;
        }

        .comments-container {
            margin-top: 2rem;
            background: white;
            border-radius: 8px;
            box-shadow: var(--shadow-base);
            padding: 2rem;
        }

        .comment-form {
            margin-bottom: 2rem;
        }

        #commentInput {
            width: 100%;
            height: 100px;
            padding: 1rem;
            border: 1px solid #ddd;
            border-radius: 8px;
            resize: vertical;
            font-size: 1em;
        }

        .comment-list {
            flex: 1;
            overflow-y: auto;
            padding: 1.5rem;
            display: flex;
            flex-direction: column; /* 评论按顺序显示 */
        }

        .comment-item {
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 8px;
            margin-bottom: 1rem;
            transition: transform 0.2s;
        }

        .comment-item:hover {
            transform: translateX(5px);
        }

        .comment-item .comment-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .comment-item .comment-header .comment-user {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .comment-item .comment-header .comment-username {
            font-weight: 500;
        }

        .comment-item .comment-header .comment-time {
            font-size: 0.8em;
            color: #666;
        }

        .comment-indicator {
            position: fixed;
            bottom: 100px;
            right: 30px;
            background: var(--primary-color);
            color: white;
            padding: 12px 20px;
            border-radius: 25px;
            display: none;
            animation: slideUp 0.3s ease-out;
        }

        @keyframes slideUp {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        @media (max-width: 768px) {
            .comments-container {
                padding: 1rem;
            }
            .comment-form {
                margin-bottom: 1rem;
            }
            #commentInput {
                height: 80px;
                font-size: 0.9em;
            }
            .reader-btn {
                min-width: auto;
                padding: 0.6rem 1rem;
                margin: 0.3rem;
            }
        }

        @media (max-width: 1200px) {
            .comments-sidebar {
                width: 100%;
                height: auto;
                position: relative;
                display: none;
            }
            .comments-toggle-btn {
                top: 0;
                right: 0;
                border-radius: 25px;
            }
        }
    </style>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="main-container">
    <header class="reader-header">
        <h1 class="book-title">${bookTitle}</h1>
    </header>

    <!-- 内容区域 -->
    <div class="row">
        <div class="col-md-12">
            <div id="bookContent" class="book-content font-DNMrHsV173Pd4pgy medium-font">
                <div class="text-content">${fileContent}</div>
            </div>
        </div>
    </div>

    <!-- 评论区 -->
    <div class="comments-container">
        <div class="comment-form">
            <h3>读者评论</h3>
            <textarea id="commentInput" placeholder="写下您的见解（最多500字）"></textarea>
            <div style="margin-top: 1rem; display: flex; justify-content: space-between; align-items: center">
                <span id="charCount" style="color: #666; font-size: 0.9em">500字剩余</span>
                <button class="reader-btn" id="submitComment">
                    <i class="bi bi-send"></i> 提交
                </button>
            </div>
        </div>

        <div class="comment-list" id="commentList">
            <c:forEach items="${comments}" var="comment">
                <div class="comment-item">
                    <div class="comment-header">
                        <div class="comment-user">
                            <div class="comment-username">${comment.userName}</div>
                            <div class="comment-time">
                                <fmt:formatDate value="${comment.createTime}" pattern="yyyy-MM-dd HH:mm"/>
                            </div>
                        </div>
                    </div>
                    <div style="margin-top: 0.8rem; color: #333">
                            ${comment.content}
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>

    <!-- 控制栏 -->
    <div class="control-bar text-center">
        <button class="reader-btn" id="toggleFontSize">
            <i class="bi bi-fonts"></i> 字体
        </button>
        <button class="reader-btn" id="prevChapter">
            <i class="bi bi-chevron-left"></i> 上一页
        </button>
        <button class="reader-btn" id="nextChapter">
            下一页 <i class="bi bi-chevron-right"></i>
        </button>

        <button class="reader-btn" id="toggleNightMode">
            <i class="bi bi-brightness-low"></i> 夜间模式
        </button>

        <button class="reader-btn" id="toggleAudioPlayback">
            <i class="bi bi-volume-up"></i> 听书
        </button>

        <button class="reader-btn" id="closeReader">
            <i class="bi bi-x-lg"></i> 关闭
        </button>
    </div>

    <div class="comment-indicator" id="commentIndicator">
        <i class="bi bi-chat-square-text"></i> 评论已提交
    </div>
</div>

<script>
    $(document).ready(function() {
        let currentFontSize = 'medium-font';
        let nightModeActive = false;

        let isSpeaking = false;
        let currentSpeech = null;

        // 听书功能
        function toggleAudioPlayback() {
            const content = $('.text-content').text();
            if(isSpeaking) {
                // 暂停朗读
                window.speechSynthesis.cancel();
                isSpeaking = false;
                $('#toggleAudioPlayback i').removeClass('bi-pause-fill').addClass('bi-play-fill');
            } else {
                // 开始朗读
                if('speechSynthesis' in window) {
                    const utterance = new SpeechSynthesisUtterance(content);
                    // 设置语音参数
                    utterance.lang = 'zh-CN'; // 中文普通话
                    utterance.pitch = 1;      // 音高 0-2
                    utterance.volume = 1;     // 音量 0-1
                    // 事件监听
                    utterance.onstart = () => {
                        isSpeaking = true;
                        $('#toggleAudioPlayback i').removeClass('bi-play-fill').addClass('bi-pause-fill');
                    };
                    utterance.onend = () => {
                        isSpeaking = false;
                        $('#toggleAudioPlayback i').removeClass('bi-pause-fill').addClass('bi-play-fill');
                    };
                    currentSpeech = utterance;
                    window.speechSynthesis.speak(utterance);
                } else {
                    alert("您的浏览器不支持文本朗读功能，请使用最新版Chrome或Edge浏览器");
                }
            }
        }

        // 在事件绑定部分添加
        $('#toggleAudioPlayback').click(toggleAudioPlayback);

        // 页面离开时停止朗读
        $(window).on('beforeunload', function() {
            if(isSpeaking) {
                window.speechSynthesis.cancel();
            }
        });

        // 字体切换功能
        function toggleFontSize() {
            const sizes = ['small-font', 'medium-font', 'large-font'];
            const currentIndex = sizes.indexOf(currentFontSize);
            currentFontSize = sizes[(currentIndex + 1) % sizes.length];
            $('#bookContent').removeClass(sizes.join(' ')).addClass(currentFontSize);
        }

        // 翻页功能
        function scrollContent(direction) {
            const lineHeight = parseInt($('#bookContent').css('line-height'), 10); // 获取行高
            const scrollAmount = lineHeight * 13; // 每次滚动13行

            if (direction === 'up') {
                window.scrollBy({
                    top: -scrollAmount,
                    behavior: 'smooth'
                });
            } else if (direction === 'down') {
                window.scrollBy({
                    top: scrollAmount,
                    behavior: 'smooth'
                });
            }
        }

        // 夜间模式切换
        function toggleNightMode() {
            nightModeActive = !nightModeActive;
            $('body').toggleClass('night-mode', nightModeActive);
            $('.comments-container').toggleClass('night-mode', nightModeActive);
            $('.comment-form').toggleClass('night-mode', nightModeActive);
            $('.comment-list').toggleClass('night-mode', nightModeActive);
            $('.comment-item').toggleClass('night-mode', nightModeActive);
            $('.reader-btn').toggleClass('night-mode', nightModeActive);
        }

        // 提交评论
        $("#submitComment").click(function() {
            var commentText = $("#commentInput").val();
            if (commentText.trim().length === 0) {
                alert("评论内容不能为空");
                return;
            }

            // 这里可以添加提交评论的AJAX请求
            console.log("评论已提交: " + commentText);

            // 清空评论输入框
            $("#commentInput").val("");

            // 显示评论已提交提示
            $("#commentIndicator").fadeIn(300).fadeOut(3000);

            // 模拟添加新评论
            var currentTime = new Date().toLocaleString();
            var newComment = `
                <div class="comment-item">
                    <div class="comment-header">
                        <div class="comment-user">
                            <div class="comment-username">新用户</div>
                            <div class="comment-time">
                                ${currentTime}
                            </div>
                        </div>
                    </div>
                    <div style="margin-top: 0.8rem; color: #333">
                        ${commentText}
                    </div>
                </div>
            `.replace(/\$\{currentTime\}/g, currentTime).replace(/\$\{commentText\}/g, commentText);

            $("#commentList").prepend(newComment); // 最新的评论在上面

            // 滚动到最新评论的位置
            $("#commentList").scrollTop(0);
        });

        // 字符计数
        $("#commentInput").on('input', function() {
            var maxLength = 500;
            var currentLength = $(this).val().length;
            $("#charCount").text((maxLength - currentLength) + "字剩余");
        });

        // 切换评论区显示和隐藏
        $("#toggleComments").click(function() {
            var commentsSidebar = $("#commentsSidebar");
            var toggleCommentsBtn = $("#toggleComments i");

            if (commentsSidebar.is(":visible")) {
                commentsSidebar.hide();
                toggleCommentsBtn.removeClass("bi-x").addClass("bi-chat-square-text");
                $("#toggleComments").css("border-radius", "25px");
            } else {
                commentsSidebar.show();
                toggleCommentsBtn.removeClass("bi-chat-square-text").addClass("bi-x");
                $("#toggleComments").css("border-radius", "25px 0 0 25px");
                // 滚动到最新评论的位置
                $("#commentList").scrollTop(0);
            }
        });

        // 添加鼠标悬停时显示滚动条的功能
        $(".comment-list").hover(function() {
            $(this).css("overflow-y", "auto");
        }, function() {
            $(this).css("overflow-y", "hidden");
        });

        // 事件绑定
        $('#toggleFontSize').click(toggleFontSize);
        $('#toggleNightMode').click(toggleNightMode);
        $('#closeReader').click(() => {
            window.history.back();
            setTimeout(() => alert("正在返回书籍详情..."), 100);
        });
        $('#prevChapter').click(() => {
            scrollContent('up'); // 向上滚动13行
        });
        $('#nextChapter').click(() => {
            scrollContent('down'); // 向下滚动13行
        });
    });
</script>

</body>
</html>
